<template>
  <div class="priceQs">
    <priceQsbar></priceQsbar>
    <div class="box">
      <div class="show-p">
        <p class="p1">
          <span class="s1">low-end</span>
          <span class="s2">{{priceObj.minprice}}</span>
        </p>
        <p class="p1">
          <span class="s1">high-end</span>
          <span class="s3" >{{priceObj.maxprice}}</span>
        </p>
      </div>
    </div>

    <div class="inforBox bgw">
      <div class="infor">
        <p class="name" :class="'name'+priceObj.flag">{{priceObj.price}}</p>
        <p class="dw1">{{priceObj.inputdate}}</p>
      </div>
      <div class="bxo1" :class="priceObj.flag">
        <p class="num">{{priceObj.oldPrice}}</p>
        <p class="qs">
          <span>{{priceObj.gain}}</span>
          <span>{{priceObj.per}}</span>
        </p>
      </div>
    </div>
    <div class="bgw" style="padding:0.1rem 0.3rem;">
      <p class="eachrtDw">UNIT:{{priceObj.unit}}</p>
      <echart></echart>
    </div>
    <div style="height:.3rem;width:100%;background:rgba(243,246,249,1);"></div>
    <partmorennews :list="list" style=" margin-top:.3rem"></partmorennews>
  </div>
</template>

<script>
import echart from "../../components/ehacrt.vue";
import partmorennews from "../../components/newslist/priceQslist";
import priceQsbar from "../../components/nav/priceQsbar";
import { searchinfolist } from "../../api/sort";
export default {
  components: {
    echart,
    partmorennews,
    priceQsbar
  },
  data() {
    return {
 
      priceObj: this.$route.query,
      list: []
    };
  },
  methods: {
    getHot() {
      let obj = {};
      obj.channel = this.$route.query.channel;
      obj.kw = this.$store.state.pricepartkw;
      obj.limit = 5;
      searchinfolist(obj).then(res => {
        if (res.code == "0000") {
          this.list = res.data;
        }
      });
    }
  },
  created() {
    this.getHot();
  }
};
</script>

<style scoped lang='less'>
.priceQs {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
}
.box {
  width: 100%;
  background: rgba(31, 135, 229, 1);
  .show-p {
    display: flex;
    justify-content: space-between;
    font-size: 0.24rem;
    color: rgba(255, 255, 255, 0.8);
    width: 6.94rem;
    height: 0.7rem;
    background: rgba(2, 110, 207, 1);
    border-radius: 0.08rem;
    margin: 0 auto;
    padding: 0 0.2rem;

    .p1 {
      display: flex;
      // align-items: center;
      justify-content: flex-start;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .s1 {
      font-size: 0.28rem;
      margin-right: 0.1rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #ffffff
    }
    .s2,
    .s3 {
      font-size: 0.28rem;
      padding-right: 0.34rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      // color: #ffffff;
      // background-image: url("../../assets/img/price/trendorigin.png");
      // background-repeat: no-repeat;
      // background-position: 99% center;
      // background-size: 0.2rem;
    }
    .s3 {
      &.normal {
        background-image: none;
      }
      &.up {
        background-image: url("../../assets/img/price/trend-up.png");
        color: #ea4b4a;
      }
      &.down {
        background-image: url("../../assets/img/price/trend-down.png");
        color: #00cb79;
      }
    }
  }
}

.normal {
  color: #ffffff !important;
}
.down {
  color: #00cb79 !important;
}
.up {
  color: #ea4b4a !important;
}
.bgw {
  background: #ffffff;
  position: relative;
  .eachrtDw{
    position: absolute;
    left: 0.3;
    top: .2rem;
    color:#666666
  }
}
.inforBox {
  display: flex;
  justify-content: space-between;
  background: rgba(31, 135, 229, 1);
  padding: 0.3rem 0.3rem 0;
  .infor {
    .dw1 {
      font-size: 0.32rem;
      color: #ffffff;
    }
    .name {
      font-size: 0.45rem;
      color: #ffffff;
      padding-right: 0.6rem;
      background-repeat: no-repeat;
      background-position: 99% center;
      background-size: 0.36rem;
      margin-bottom: 0.2rem;
      &.namenormal {
        background-image: none;
      }
      &.nameup {
        background-image: url("../../assets/img/price/trend-up.png");
      }
      &.namedown {
        background-image: url("../../assets/img/price/trend-down.png");
      }
    }
  }
  .bxo1 {
    .num {
      font-size: 0.6rem;
      margin-bottom: 0.1rem;
      text-align: right;
    }
    .qs {
      font-size: 0.26rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;

      span:first-child {
        margin-right: 0.4rem;
      }
    }
  }
  .bxo2 {
    color: rgba(110, 111, 117, 1);
    background: linear-gradient(
      90deg,
      rgba(253, 253, 253, 0) 0%,
      rgba(251, 243, 232, 1) 100%
    );
    .p1 {
      margin: 0.22rem 0;
    }

    .span1 {
      border-right: 0.01rem solid rgba(110, 111, 117, 1);
      padding-right: 0.15rem;
      margin-right: 0.15rem;
    }
    .span2 {
      margin-right: 0.15rem;
    }
  }
}

.dw {
  color: rgba(110, 111, 117, 1);
  position: absolute;
  top: 0.15rem;
}
</style>